<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="筛选">
                <a-input v-model="queryParam.keyword" placeholder="请输入筛选" />
              </a-form-item>
            </a-col>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleRetail">零售设置</a-button>
        <a-button type="primary" @click="handleWholesale">批发设置</a-button>
        <a-button type="primary" @click="handleAllot">调拨设置</a-button>
      </div>

      <a-table ref="table" size="default" rowKey="key" :columns="columns" :data-source="loadData">
        <!-- <span slot="action" slot-scope="text, record">
          <template>
            <a>编辑</a>
          </template>
        </span> -->
      </a-table>

      <retail-form
        ref="retailModal"
        :visible="retailVisible"
        :loading="confirmRetailLoading"
        :model="mdl"
        @cancel="handleRetailCancel"
        @ok="handleRetailOk"
      />
      <wholesale-form
        ref="wholesaleModal"
        :visible="wholesaleVisible"
        :loading="confirmWholesaleLoading"
        :model="wholeMdl"
        @cancel="handleWholesaleCancel"
        @ok="handleWholesaleOk"
      />
      <allot-form
        ref="allotModal"
        :visible="allotVisible"
        :loading="confirmAllotLoading"
        :model="allotMdl"
        @cancel="handleAllotCancel"
        @ok="handleAllotOk"
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
// import moment from 'moment'
import { Ellipsis } from '@/components'
import { getServiceList } from '@/api/manage'
import RetailForm from './retail'
import WholesaleForm from './wholesale'
import AllotForm from './allot'
import { updateWholesaleSettingUsingPOST, getWholesaleSettingUsingPOST,getRetailSettingUsingPOST,updateRetailSettingUsingPOST,getAllocateSettingUsingPOST, updateAllocateSetting} from '@/api/api/xitongguanli.ts'
const columns = [
  {
    title: '打印机串码',
    dataIndex: 'name',
  },
  {
    title: '使用门店',
    dataIndex: 'type',
  },
  {
    title: '',
    dataIndex: 'action',
    width: '180px',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'Print',
  components: {
    Ellipsis,
    RetailForm,
    WholesaleForm,
    AllotForm,
  },
  data() {
    this.columns = columns
    return {
      wholeMdl: null,
      allotMdl: null,
      // create model
      retailVisible: false,
      confirmRetailLoading: false,
      wholesaleVisible: false,
      confirmWholesaleLoading: false,
      allotVisible: false,
      confirmAllotLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: [{ name: '001-002-003-004', type: '鼓楼大洋店' }],
    }
  },
  methods: {
    handleSearch() {
      getServiceList()
        .then(() => {
          this.loadData = []
        })
        .catch(() => {
          this.loadData = []
        })
    },
    handleRetail() {
      getRetailSettingUsingPOST()
        .then((res) => {
          this.mdl = {
            num: res.data?.list[0].value,
            head: res.data?.list[5].value,
            tail: res.data?.list[4].value,
            font_size: res.data?.list[6].value,
          }
          this.retailVisible = true
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleRetailOk() {
      const form = this.$refs.retailModal.form
      this.confirmRetailLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          updateRetailSettingUsingPOST([
            { id: 13, value: values.tail },
            { id: 14, value: values.head },
            { id: 3, value: values.num },
            { id: 15,  value:values.font_size}
          ])
            .then((res) => {
              this.$message.success('操作成功')
              this.retailVisible = false
              this.confirmRetailLoading = false
            })
            .catch((error) => {
              this.confirmRetailLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmRetailLoading = false
        }
      })
    },
    handleRetailCancel() {
      this.retailVisible = false
      const form = this.$refs.retailModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleWholesale() {
      getWholesaleSettingUsingPOST()
        .then((res) => {
          this.wholeMdl = {
            head: res.data?.list[1].value,
            tail: res.data?.list[0].value,
            remark: res.data?.list[2].value,
            up_down: res.data?.list[3].value,
            font_size: res.data?.list[4].value,
          }
          this.wholesaleVisible = true
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleWholesaleOk() {
      const form = this.$refs.wholesaleModal.form
      this.confirmWholesaleLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          updateWholesaleSettingUsingPOST([
            { id: 18, value: values.tail },
            { id: 19, value: values.head },
            { id: 20, value: values.remark },
            { id: 21, value: values.up_down },
            { id: 22,  value:values.font_size}
          ])
            .then((res) => {
              this.$message.success('操作成功')
              this.wholesaleVisible = false
              this.confirmWholesaleLoading = false
            })
            .catch((error) => {
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmWholesaleLoading = false
        }
      })
    },
    handleWholesaleCancel() {
      this.wholesaleVisible = false
      const form = this.$refs.wholesaleModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleAllot() {
      getAllocateSettingUsingPOST()
        .then((res) => {
          this.allotMdl = {
            font_size: res.data?.list[1].value,
          }
          this.allotVisible = true
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleAllotOk() {
      const form = this.$refs.allotModal.form
      this.confirmAllotLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          updateWholesaleSettingUsingPOST([
            { id: 24,  value:values.font_size}
          ])
            .then(() => {
              this.$message.success('操作成功')
              this.allotVisible = false
              this.confirmAllotLoading = false
            })
            .catch((error) => {
              this.confirmAllotLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmAllotLoading = false
        }
      })
    },
    handleAllotCancel() {
      this.allotVisible = false
      const form = this.$refs.allotModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
  },
}
</script>
